<template>
  <div class="add">
    <el-steps :active="curStep" align-center>
      <el-step title="填写申请信息"></el-step>
      <el-step title="选择养护记录"></el-step>
      <el-step title="确认工程数量清单"></el-step>
      <el-step title="确认工程数量汇总表"></el-step>
    </el-steps>
  
    <!-- 步骤一，填写申请信息 -->
    <BaseForm 
      v-show="curStep === 0" 
      ref="base-form" 
      :page-type="pageType"
      :info="contractInfo" 
      :cur-step="curStep" 
      @next="firstStepNext" 
      @typeChange="typeChange" 
      @sycleChange="typeChange"
      >
    </BaseForm>
    <!-- 步骤二，选择养护记录 -->
    <SelectRecords 
      v-show="curStep === 1" 
      ref="select-record" 
      :form="formData" 
      :page-type="pageType"
      :cur-step="curStep" 
      @back="curStep = curStep - 1" 
      @next="secondStepNext"
  >
    </SelectRecords>
    <!-- 步骤三，确认工程数量清单 -->
    <ProjectInventory 
      v-show="curStep === 2" 
      ref="project-inventory" 
      :cur-step="curStep" 
      @next="thrirdStepNext" 
      @back="curStep = curStep - 1"
      >
    </ProjectInventory>
    <!-- 步骤，确认工程数量汇总表 -->
    <ProjectSummary 
      v-show="curStep === 3" 
      ref="project-summary" 
      :cur-step="curStep"
      @back="curStep = curStep - 1"
      >
    </ProjectSummary>
    
  </div>
</template>
<script>

import BaseForm from './BaseForm.vue'
import SelectRecords from './SelectRcords.vue'
import ProjectInventory from './ProjectInventory.vue'
import ProjectSummary from './ProjectSummary.vue'

import { ApplicationModel, ContractModel } from '@/models'
export default {
    components: {
       
        BaseForm,
        SelectRecords,
        ProjectInventory,
        ProjectSummary
    },
    data() {
        return {
            curStep: 0,
            model: new ApplicationModel(),
            contractModel: new ContractModel(),
            contractInfo: {}, // 合同信息
            formData: {}, // 步骤一表单信息
            pageType: 'add', // 编辑或者是新增
            id: '', // 申请id,编辑的时候使用
        }
    },
    created() {
        // 编辑
        const {id, pageType } = this.$route.query
        if (id && pageType === 'edit') {
            this.id = id 
            this.pageType = pageType
            this.getDetail()
        } else {
            // 新增
            const {highwayCode, highwayName, contractInfo} = JSON.parse(this.$route.query.chapter)
            const { contractId, projectName, contractorId, contractorName, name} = contractInfo
            this.contractInfo = {highwayCode, highwayName, contractId, contractName: name, projectName, contractorId, contractorName}
        }
    },
    methods: {
        firstStepNext(form) {
            this.curStep = this.curStep + 1
            this.formData = {...form}
        },
        secondStepNext(res) {
            this.$refs['project-inventory'].id = res.id
            this.curStep = this.curStep + 1
        },
        thrirdStepNext(id) {
            this.$refs['project-summary'].id = id
            this.curStep = this.curStep + 1
        },
        // 类型变更
        typeChange() {
            this.$refs['select-record'].firstSetDefualt = true
        },
        // 申请详情
        getDetail() {
            this.model.applyDetail({id: this.id}).then(res => {
                const {highwayCode, highwayName, roadSection, stakeNoRange, contractId, contractName, contractProjectName: projectName, constructionUnitId: contractorId, constructionUnitName: contractorName, cycle, type, applicationInstructions, applicantSignature, maintRecordList = []} = res
                // 合同信息
                this.contractInfo = {highwayCode, highwayName, roadSection, stakeNoRange, projectName, contractId, contractName, contractorId, contractorName}
                // 填写基本信息
                this.$refs['base-form'].form.id = this.id
                this.$refs['base-form'].form.cycle = cycle
                this.$refs['base-form'].form.type = type
                this.$refs['base-form'].form.applicationInstructions = applicationInstructions
                this.$refs['base-form'].form.applicantSignature = applicantSignature
                // 选择养护记录
                if (maintRecordList) {
                    this.$refs['select-record'].selectList = maintRecordList || []
                }
            })
        }
    }
}
</script>
<style scoped lang="scss">
.add{
  width: 100%;
  height: 100%;
  ::v-deep
  {
    .el-step__head.is-process{
      color: #0162FF;
      border-color: #0162FF;
      .el-step__icon.is-text{
        color: #fff;
        background: #0162FF;
      }
      
    }
    .el-step__head.is-finish{
      .el-step__line{
        background-color: #0162FF;
      }
    }
    .el-step__title.is-process{
      color: #0162FF;
      font-weight: 500;
    }
  } 

}

</style>
